<template>
	<view>
		<view class="container">
			<view class="bg-img bg-mask" style="height: 435upx;"   :style="{backgroundImage:'url('+webUrl + userInfo.u_background_path + ')'}">
				<view class="text-white change_img iconfont icon-xiugaitupian" @click="showModal"  data-target="bottomModal1" style="font-size: 60upx;" ></view>
				<view class="flex justify-start cu-avatar xl round head_portrait " @click="showModal" data-target="bottomModal2" style="width: 150upx;height: 150upx;" :style="{backgroundImage:'url('+webUrl+ userInfo.u_face_image_path + ')'}"></view>
				<view class="id_name_Box" style="display: flex;">
					<view style="width: 40%;">
						<view style="line-height: 70upx;height:70upx;font-size:40upx;padding-left: 10%;max-width: 380rpx;white-space: nowrap;text-overflow:ellipsis; overflow:hidden;">
							{{userInfo.nickname}}
						</view>
					</view>
					<view style="display: flex; width: 60%;">
						<view style="width: 40%;">
							<view class="cu-tag light bg-brown sm" style=" margin-right: 10upx;">厦门</view>
							<view class="cu-tag light bg-white sm" style=" margin-right: 10upx;">男</view>	
						</view>
						<view style="width: 60%;"><button class="cu-btn round  bg-grey" style=" margin-left: 25upx;" @click="editInfo">编辑资料</button></view>
						
					</view>
				</view>
			</view>
			<view class="bg-white flex justify-start" style="width: 100%;height: 50upx;margin-top: 130upx;">
				<view style="padding-left: 10%;line-height:70upx" class="text-grey ">{{userInfo.follow_counts}}关注</view>
				<view style="padding-left: 10%;line-height:70upx" class="text-grey ">{{userInfo.fans_counts}}粉丝</view>
			</view>
			<view>
				<scroll-view scroll-x class="bg-white nav">
					<view class="flex text-center">
						<view class="cu-item flex-sub " :class="TabCur=='video'?'text-orange cur':''"   @tap="tabSelect" data-id="video">
							视频
						</view>
						<view class="cu-item flex-sub" :class="TabCur=='favor'?'text-orange cur':''"   @tap="tabSelect" data-id="favor">
							喜欢
						</view>
						<view class="cu-item flex-sub" :class="TabCur=='record'?'text-orange cur':''"  @tap="tabSelect" data-id="record">
							历史
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="cu-modal bottom-modal" :class="modalName=='bottomModal1'?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white">
						<view class="action text-blue" @tap="hideModal">取消</view>
					</view>
					<view class="padding-xl" @tap="chooseBGImage">
						选择相册
					</view>
				</view>
			</view>
			<view class="cu-modal bottom-modal" :class="modalName=='bottomModal2'?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white">
						<view class="action text-blue" @tap="hideModal">取消</view>
					</view>
					<view class="padding-xl" @tap="chooseFAImage">
						选择相册
					</view>
				</view>
			</view>
			<view class="bg-white" v-if="TabCur=='video'">
				<view class="grid margin-bottom text-center col-3">
					<view v-for="item in videoList" :key="item.id">
						<view style="height: 340upx;" class="bg-cyan" @click="gotoVideoInfo(item.id)">
							<image style="height: 340upx;" :src=webUrl+item.cover_path mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="bg-white" v-if="TabCur=='favor'">
				<view class="grid margin-bottom text-center col-3">
					<view v-for="item in favorVideoList" :key="item.id" @click="gotoVideoInfo(item.id)">
						<view style="height: 340upx;" class="bg-cyan">
							<image style="height: 340upx;" :src=webUrl+item.cover_path mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
			
			<view v-if="TabCur=='record'">
				<view class="grid margin-bottom text-center col-3">
					<view v-for="item in recordVideoList" :key="item.id" @click="gotoVideoInfo(item.id)">
						<view style="height: 340upx;" class="bg-cyan">
							<image style="height: 340upx;" :src=webUrl+item.cover_path mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,mapMutations
	}from 'vuex'
	export default {
		onLoad() {
			var user = this.userInfo
			uni.request({
				url:this.webUrl+'queryVideoByUserId?id='+user.id,
				success: (res) => {
					this.videoList = res.data.data
				}
			})
		},
		computed:{
			...mapState(['hasLogin','userInfo','webUrl']),
		},
		data() {
			return {
				TabCur: 'video',
				modalName: null,
				videoList:'',
				favorVideoList:'',
				recordVideoList:'',
			};
		},
		methods:{
			...mapMutations(['login','changeBGI','changeFAI']),
			gotoVideoInfo(video_id){
				uni.navigateTo({
					url:"../videoIndex/videoIndex?video_id="+video_id
				})
			},
			editInfo(){
				uni.navigateTo({
					url:"../editInfo/editInfo"
				})
			},
			tabSelect(e){
				this.TabCur = e.currentTarget.dataset.id;
				if(this.TabCur == 'favor'){
					var user = this.userInfo
					
					uni.request({
						url:this.webUrl+'queryUserLikeVideos?userId='+user.id,
						success: (res) => {
							this.favorVideoList = res.data.data
						}
					})
				}
				if(this.TabCur == 'record'){
					var s = ''
					var user = this.userInfo
					uni.request({
						url:this.webUrl+'queryVideoRecord?userId='+user.id,
						success:function(res){
							var list = ''
							uni.request({
								url:this.webUrl+'queryVideosByVideoId',
								data:{
									videos:res.data.data
								},
								success:function(res2) {
									this.recordVideoList = res2.data.data;
								}.bind(this)
							})
						}.bind(this)
					})
					
		
				}
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			chooseFAImage(){
				var userid = this.userInfo.id
				console.log(userid)
				var that = this
				var msg = null
				var uploadTask = uni.chooseImage({
					count:1,
					sourceType :['album'],
					success: (chooseImageRes) => {
						var tempfilepaths = chooseImageRes.tempFilePaths;
						uni.showLoading({
							title:"上传中，请稍等"
						})
						uni.uploadFile({
							url:this.webUrl+"user/faceUpload",
							filePath: tempfilepaths[0],
							name: 'files',
							formData: {
								'userId':userid
							},
							success:(uploadFileRes) => {
								console.log(uploadFileRes)
								if(uploadFileRes.statusCode==200){
									console.log(uploadFileRes.data)
									var obj = JSON.parse(uploadFileRes.data);
									msg = obj.msg
									uni.hideLoading();
									this.modalName=null
									this.changeFAI(msg)
									uni.showToast({
										title:"上传成功"
									})
								}
							  	if(uploadFileRes.statusCode==404){
									console.log(uploadFileRes.data)
									console.log(uploadFileRes.statusCode)
									uni.hideLoading();
									this.modalName=null
									uni.showToast({
										title:"上传失败",
										icon:"none"
									})
								}
								return;
							}
						})
					},
				})
			},
			chooseBGImage(){
				var userid = this.userInfo.id
				console.log(userid)
				var that = this
				var msg = null
				var uploadTask = uni.chooseImage({
					count:1,
					sourceType :['album'],
					success: (chooseImageRes) => {
						var tempfilepaths = chooseImageRes.tempFilePaths;
						uni.showLoading({
							title:"上传中，请稍等"
						})
						uni.uploadFile({
							url: this.webUrl+"user/backgroundImagUpload",
							filePath: tempfilepaths[0],
							name: 'files',
							formData: {
								'userId':userid
							},
							success:(uploadFileRes) => {
								if(uploadFileRes.statusCode==200){
									var obj = JSON.parse(uploadFileRes.data);
									msg = obj.msg
									uni.hideLoading();
									this.modalName=null
									this.changeBGI(msg)
									uni.showToast({
										title:"上传成功"
									})
								}
							  	if(uploadFileRes.statusCode==404){
									console.log(uploadFileRes.data)
									console.log(uploadFileRes.statusCode)
									uni.hideLoading();
									that.modalName=null
									uni.showToast({
										title:"上传失败",
										icon:"none"
									})
								}
								return;
							}
						})
					},
				})
				
				
			}
		}
	}
</script>

<style lang="stylus">
	.container {
			.change_img {
				margin-left:10%;
				padding-top:3%;
			}
			.head_portrait {
				
				margin-left:25upx;
				margin-top:250upx;
			}
			.id_name_Box {
				width:100%;
				height:120upx;
				
			}
			
		
	}
	
</style>
